<template>
  <div>
    <k-search show-export @export="onExport">
      <el-input placeholder="输入用户名、昵称、手机号搜索"
                size="small"
                v-model="search.key"
                @keyup.enter.native="onClickSearch"
                style="width: 400px"/>

      <k-search-box label="性别">
        <el-select v-model="search.sex" size="small"
                   class="ke__margin-left" style="width: 80px">
          <el-option :value="-1" label="全部"/>
          <el-option :value="0" label="女"/>
          <el-option :value="1" label="男"/>
        </el-select>
      </k-search-box>

      <k-search-box>
        <el-button type="info" size="small"
                   @click="onClickSearch"
                   icon="el-icon-search">搜索</el-button>
      </k-search-box>
    </k-search>


    <div class="ke__bgfff ke__padding">
      <el-table :data="list" v-loading="loading" size="small">
        <el-table-column prop="id" label="UID" width="80"/>

        <el-table-column prop="username" label="用户名"/>

        <el-table-column prop="realname" label="昵称"/>

        <el-table-column prop="phone" label="手机号码"/>

        <el-table-column prop="weixin" label="微信号"/>

        <el-table-column label="性别" width="120" align="center">
          <template slot-scope="{ row }">
            {{ ['女', '男'][row.sex] }}
          </template>
        </el-table-column>

        <el-table-column prop="age" label="年龄" width="60" align="center"/>

        <el-table-column prop="create_time" label="注册时间" width="200"/>

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text"
                       icon="el-icon-edit"
                       title="编辑"
                       @click="onClickUserEdit(row, $index)"/>

            <el-button type="text"
                       icon="el-icon-delete"
                       title="删除"
                       @click="onClickUserDelete(row, $index)"/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :total="total"
                     :page-size="limit"
                     @current-change="onPageChange"/>
    </div>

    <!-- 编辑窗口 -->
    <index-edit :show.sync="userEditDialog" ref="editDialog"/>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import IndexEdit from './index-edit'
import KSearch from '@/components/KSearch'
import KSearchBox from '@/components/KSearchBox'
@Component({
  components: { KSearchBox, KSearch, IndexEdit }
})
export default class UsersIndex extends Vue {
  list = []
  total = 0
  loading = true
  page = 1
  limit = 20
  search = {
    sex: -1
  }
  userEditDialog = false

  mounted () {
    this.onLoad()
  }

  onPageChange (page) {
    this.list = []
    this.page = page
    this.onLoad()
  }

  // 加载列表
  onLoad () {
    this.loading = true
    this.$http.get('admin/users', {
      page: this.page,
      limit: this.limit,
      ...this.search
    })
      .finally(() => this.loading = false)
      .then(result => {
        this.list = result.list
        this.total = result.total
      })
  }

  // 搜索
  onClickSearch () {
    this.page = 1
    this.onLoad()
  }

  // 导出表格
  onExport () {
    this.$http.post('admin/export/user')
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('导出成功')
          setTimeout(() => {
            this.$router.push({ name: 'export' })
          }, 500)
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

  // 用户编辑
  onClickUserEdit (row, idx) {
    this.userEditDialog = true
    this.$refs.editDialog.data = { ...row, $index: idx }
    this.$refs.editDialog.successCallback = (data) => {
      this.list.splice(idx, 1, { ...data })
    }
  }

  // 删除
  async onClickUserDelete (row, idx) {
    await this.$confirm('确定要删除吗?')
    this.list.splice(idx, 1)
    this.$http.delete(`admin/users/${row.id}`)
      .then((result) => {
        if (result.res_code === 0) {
          this.$message.success('删除成功')
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

}
</script>

<style scoped lang="scss">
</style>
